import React, { FC, useState } from "react";
import styles from "./common.module.scss";
import QuestionSearch from "../../components/QuestionSearch";
import {
  Typography,
  Empty,
  Table,
  Tag,
  Button,
  Space,
  Modal,
  Spin,
  message,
} from "antd";
import { ExceptionOutlined } from "@ant-design/icons";
import { useTitle,useRequest } from "ahooks";
import useLoadingQuestionList from "../../hooks/useLoadingQuestionList";
import ListPage from "../../components/ListPage";
import { updateQuestion,delectQuestion } from "../../utils/api";

const { Title } = Typography;
const { confirm } = Modal;
const List: FC = () => {
  useTitle("星问卷-回收站");
  const [selectIds, setSelectIds] = useState<string[]>([]);
  const { data = {}, loading,refresh } = useLoadingQuestionList({ isDelected: true });
  const { list = [], total = 0 } = data;
  const questionList = list;
  const tableColumns = [
    {
      title: "标题",
      dataIndex: "title",
    },
    {
      title: "是否发布",
      dataIndex: "isPublished",
      render: (isPublished: boolean) => {
        return isPublished ? (
          <Tag color="processing">已发布</Tag>
        ) : (
          <Tag>未发布</Tag>
        );
      },
    },
    {
      title: "已答卷",
      dataIndex: "answerCount",
    },
    {
      title: "创建时间",
      dataIndex: "createDate",
    },
  ];
  //恢复
  const { run: recoverHandle } = useRequest(async () => {
    for await (const id of selectIds) {
      await updateQuestion(id,{isDelcted:false})
    }
  }, {
    manual: true,
    debounceWait:1000,//防抖
    onSuccess(res) {
      message.success('问卷已恢复')
      refresh()
      setSelectIds([])
    }
  })
    //彻底删除

  const { run: delectQuestions } = useRequest(async () => 
    await delectQuestion(selectIds), {
    manual: true,
    onSuccess(res) {
      message.success('已完成彻底删除')
      refresh()
      setSelectIds([])
      }
  }
  )
  const delectHandle = () => {
    confirm({
      title: "是否确定从回收站移除?",
      icon: <ExceptionOutlined />,
      content: "确定删除后将无法找回",
      onOk: () => {
        delectQuestions()
      },
    });
  };
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>回收站</Title>
        </div>
        <div className={styles.right}>
          <QuestionSearch />
        </div>
      </div>
      <div className={styles.content}>
        <div style={{ marginBottom: "12px" }}>
          <Space>
            <Button
              type="primary"
              disabled={selectIds.length === 0 ? true : false}
              onClick={recoverHandle}
            >
              恢复
            </Button>
            <Button
              type="primary"
              disabled={selectIds.length === 0 ? true : false}
              danger
              onClick={delectHandle}
            >
              彻底删除
            </Button>
          </Space>
        </div>
        {loading && (
          <div style={{ textAlign: "center" }}>
            <Spin />
          </div>
        )}
        {!loading && questionList.length === 0 && (
          <Empty description="暂无数据" />
        )}
        {!loading && questionList.length > 0 && (
          <Table
            rowKey={(item: any) => item._id}
            dataSource={questionList}
            columns={tableColumns}
            pagination={false}
            rowSelection={{
              type: "checkbox",
              onChange: (selectedRowKeys) => {
                setSelectIds(selectedRowKeys as string[]);
              },
            }}
          />
        )}
      </div>
      <div className={styles.footer}>
        <ListPage total={total} />
      </div>
    </>
  );
};
export default List;
